<template>
	<div class="activity-banner" v-if="!countdown.stoped">
		<div class="content">
			<div class="flex"><i class="iconfont">&#xe616;</i><span class="mgl5 font-16">限时抢购</span></div>
			<div class="flex" style="margin-left: auto">
				<span>还剩</span>
				<div class="count-down">
					<template v-if="countdown.day!=='00'"><em>{{countdown.day}}</em><span>天</span></template>
					<em>{{countdown.hou}}</em><span>时</span><em>{{countdown.min}}</em><span>分</span><em>{{countdown.sec}}</em><span>秒</span>
				</div>
			</div>
		</div>
	</div>
	<div class="activity-banner" v-if="isPreSale && !countdown.stoped">
		<div class="content">
			<div class="flex"><van-icon name="underway-o" /><span class="mgl5 font-16">预售</span></div>
			<div class="flex" style="margin-left: auto">
				<span class="pre-sale-already">已定64件</span>
				<span>剩余</span>
				<div class="count-down">
					<template v-if="countdown.day!=='00'"><em>{{countdown.day}}</em><span>天</span></template>
					<em>{{countdown.hou}}</em><span>时</span><em>{{countdown.min}}</em><span>分</span><em>{{countdown.sec}}</em><span>秒</span>
				</div>
			</div>
		</div>
	</div>
	<van-cell-group inset>
		<div class="price-wrap">
			<div class="flex" v-if="minAgentPrice>0 && priceLadders.length===0">
				<div class="price price-normal">
					<template v-if="minGuidePrice===maxGuidePrice"><small>￥</small><span>{{fen2Yuan(minAgentPrice)}}</span></template>
					<template v-else><small>￥</small><span>{{fen2Yuan(minAgentPrice)}}</span> <span class="range">~</span> <small>￥</small><span>{{fen2Yuan(maxAgentPrice)}}</span></template>
				</div>
				<van-tag plain type="primary" class="tag">提货价</van-tag>
				<span v-if="minBuyCount>1" class="txt-gray font-12 mgl10">{{minBuyCount}}件起批</span>
			</div>
			<!--			<div class="flex-top">-->
			<!--				<label class="txt-primary">活动价</label> <div class="price price-normal"> <small>￥</small><span>1999</span> <span class="range">~</span> <small>￥</small><span>2899</span> <del>￥3100</del> </div>-->
			<!--			</div>-->
			<!--							<div class="flex">-->
			<!--								<label class="txt-primary">定&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金</label> <div class="price price-normal"> <small>￥</small><span>3000</span> </div>-->
			<!--							</div>-->
			<!--							<div class="flex">-->
			<!--								<label>预 售 价</label><div class="price txt-primary"><small>￥</small><b class="font-16">3000</b> </div>-->
			<!--							</div>-->
			<div class="ladder-wrap" v-if="priceLadders&&priceLadders.length>0">
				<div class="ladder-wrap-bg"/>
				<div class="block" v-for="(ladder,index) in priceLadders" key="index" :class="ladderIndex===index?'is-meet':''">
					<div class="price-ladder"><small>￥</small><span>{{fen2Yuan(ladder.afterAmountPrice)}}</span></div>
					<div class="num-range" v-if="ladder.buyMaxAmount>0">{{ladder.buyMinAmount}}~{{ladder.buyMaxAmount}}件</div>
					<div class="num-range" v-else>≥{{ladder.buyMinAmount}}件</div>
				</div>
			</div>
			<div class="flex">
				<div class="price font-14" v-if="minAgentPrice>0">
					<template v-if="minGuidePrice===maxGuidePrice"><small>￥</small>{{fen2Yuan(minGuidePrice)}}</template>
					<template v-else><small>￥</small>{{fen2Yuan(minGuidePrice)}} ~ <small>￥</small>{{fen2Yuan(maxGuidePrice)}}</template>
				</div>
				<div class="price txt-primary" v-else>
					<template v-if="minGuidePrice===maxGuidePrice"><small>￥</small><span>{{fen2Yuan(minGuidePrice)}}</span></template>
					<template v-else><small>￥</small><span>{{fen2Yuan(minGuidePrice)}}</span> <span class="range">~</span> <small>￥</small><span>{{fen2Yuan(maxGuidePrice)}}</span></template>
				</div>
				<van-tag plain class="tag">指导价</van-tag>
				<div class="mgl10" v-if="minAgentPrice===0"><van-button size="mini" type="primary" round>查提货价</van-button></div>
				<div class="sale-amount">销量 {{saleAmount}}</div>
			</div>
			<slot name="bottom"></slot>
		</div>
		<slot/>
	</van-cell-group>
</template>
<style lang="scss" scoped>
.activity-banner{
	height:40px; overflow:hidden; color:var(--white-color);
	position:relative; font-size:13px;
	background:linear-gradient(90deg, var(--van-primary-color) 0%,var(--white-color) 300% );
	.iconfont{font-size:16px}
	.van-icon{font-size:18px}
	&::before{
		content:' '; position:absolute; top:0;left:0; width:100%;height:100%;z-index: 0;
		background: url(/img/goods/price-bg.png) 0 -32px repeat-x; opacity: .3;
		//background-size:100%;
	}
	.content{width:100%;height:100%;z-index: 1; position: relative;display: flex; align-items: center;padding:0 10px;}
	.pre-sale-already{display:flex;align-items: center;margin-right:4px;}
	.count-down{
		margin-left:4px; display: flex; align-items: center;
		span{display:block;margin:0 3px}
		em{
			font-style: normal;display:block;height:18px;line-height:18px;padding:0 3px; border-radius: 4px;
			background: var(--font-second-color);
		}
	}
}
.price-wrap{
	background:var(--white-color);border-radius:8px 8px 0 0;
	padding:10px 14px 0 14px;font-size:14px; position:relative;
	--van-tag-primary-color:var(--van-primary-color);
	.tag{margin-left:4px;padding:0 3px;}
	label{
		display:block; font-size:12px;color:var(--font-third-color);height:24px;line-height:24px; width:30px;text-align: right;padding-right:4px;
	}
	&::before{
		content:'';z-index:0;position:absolute;top:0;left:0;width:100%;height:100%; background: var(--van-primary-color); opacity:.03;
	}
	&::after {
		box-sizing:border-box; content: " "; pointer-events: none;display:block;
		border-bottom: 1px solid var(--van-cell-border-color); transform: scaleY(.5);
	}
	&>.flex{
		position:relative;
		.sale-amount{display:block;color:var(--font-disable-color);font-size:12px; margin-left:auto;}
	}
	.price{
		height:24px;line-height:24px;
	}
	small{font-family: Helvetica;}
	.price-normal{
		color:var(--van-primary-color);
		span{display:inline-block;font-size:24px;line-height: 24px;height:24px;font-weight:bold}
		del{margin-left: 5px; color:var(--font-placeholder-color); font-size: 16px;}
		.range{margin:0 2px;font-size:18px;font-family: Tahoma;}
	}

}
.ladder-wrap{
	height:60px;position:relative;margin:-10px -14px 6px -14px; display:flex; align-items: stretch;
	&-bg{
		content:' ';position:absolute;left:0;top:0;width:100%;height:100%;opacity:.15;
		background: linear-gradient(90deg, transparent -150%, var(--van-primary-color) 150%);
		//background:var(--white-color);
	}
	.block{
		flex:1;text-align: center;padding-top:10px;position:relative;
		&.is-meet{background:rgba(0,0,0,.06)}
	}
	.price-ladder{
		color:var(--van-primary-color);
		span{display:inline-block;font-size:18px;line-height:20px;height:20px;}
		small{ font-family: Helvetica;font-size:12px;}
	}
	.num-range{
		line-height: 24px;height:24px;font-size:12px; color:var(--font-second-color);
	}
}
</style>
<script lang="ts" setup>
import {PriceLadderItem} from '@/types'
import {fen2Yuan} from "@/utils/validate";

//props
const props = defineProps({
	minGuidePrice:{//最小的指导价
		type:Number, required:true, default:0
	},
	maxGuidePrice:{//最大的指导价
		type:Number, required:true, default:0
	},
	minAgentPrice:{//最小的提货价
		type:Number, required:false, default:0
	},
	maxAgentPrice:{//最大的提货价
		type:Number, required:false, default:0
	},
	saleAmount:{
		type:Number, required:false, default:0
	},
	priceLadders:{
		type:Array<PriceLadderItem>, required:false, default:[]
	},
	ladderIndex:{
		type:Number, required:false, default:0
	},
	isPreSale:{
		type:Boolean, required:false, default:false,
	},
	minBuyCount:{  //多少件起批
		type:Number, required:false, default:1
	}
})

//data
const {countdown} =useCountDownExt('2023-12-20 23:50:01')
</script>